.contrast-chart{
    padding: 0 32px 40px;
    text-align: left;
    .contrast-chart-header{
        display: flex;
        line-height: 48px;
        margin-bottom: 24px;
        .contrast-chart-header-content{
            font-size: 34px;
            color: #191F25;
        }
        .contrast-chart-header-extra{
            padding: 0 0 0 13px;
            font-size: 34px;
            color: #bfc1c2;
        }
    }
    .contrast-chart-body{
        position: relative;
        border-radius: 8px 8px 0 0;
        overflow: hidden;
    }
    .contrast-chart-body-colorBox{
        height: 172px;
        display: flex;
        .week-box{
            background: linear-gradient(90deg, #326EFA 0%, #3296FA 100%);
            width: 50%;
        }
        .month-box{
            flex: 1;
            background: linear-gradient(-90deg, #31CCEB 0%, #31E1EB 100%);
        }
    }
    .contrast-chart-body-content{
        position: absolute;
        top: 0;
        display: flex;
        left: 0;
        right: 0;
        padding: 0 40px;
        .item{ 
            flex: 1;
            color: #fff;
            &.right{
                text-align: right;
            }
        }
        .item-value{
            font-family: DINCondensed-Bold;
            margin-top: 16px;
            font-size: 76px;
            line-height: 76px;
            font-weight: 300;
        }
        .item-lable{
            margin-top: 34px;
            font-size: 22px;
            line-height: 30px;
        }
    }
    .contrast-chart-footer{
        display: flex;
        padding: 0 40px;
        line-height: 70px;
        background: #F8F8F8;
        border-radius: 0 0 8px 8px;
        justify-content: space-between;
        align-items: center;
        .center-line {
            display: block;
            height: 40px;
            border: 1px solid rgba(25,31,37,0.12);
        }
    }
    .contrast-chart-footer-content{
        flex: 1;
        font-size: 26px;
        color: rgba(25,31,37,0.72);
        font-weight: bold;
        &.right{ 
            text-align: right;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        .label {
            color: rgba(25,31,37,0.56);
            margin-right: 16px;
            font-weight: 500;
        }
        .num {
            color: #191F25;
            &.up {
                color: #3296FA;
            }
            &.down {
                color: #00BBCC;
            }
        }
        .arrow {
            width: 19px;
            height: 22px;
            display: inline-block;
            margin-right: 8px;
            img {
                width: 100%;
                height: 100%;
                display: block;
            }
        }
    }
}